<template>
	<view class="">
		<view class="contractinfo">
			<view class="constatus">
				<view class="con_status" v-if="info.check_status == 0">
					待审核
				</view>
				<view class="con_status" v-if="info.check_status == 1">
					审核中
				</view>
				<view class="con_status" v-if="info.check_status == 2">
					审核通过
				</view>
				<view class="con_status warnstatus" v-if="info.check_status == 3">
					审核未通过
				</view>
				<view class="con_status warnstatus" v-if="info.check_status == 4">
					已撤回
				</view>
			</view>
			<view class="nameli">{{info.num}}</view>
			<view class="content">客户名称：{{info.customer?info.customer.name:''}}</view>
			<view class="content">合同名称：{{info.contract?info.contract.name:''}}</view>
			<view class="content">发货仓库：{{info.warehouse?info.warehouse.name:''}} </view>
			<view class="content">负责人：{{info.owner_staff?info.owner_staff.name:''}} </view>
		</view>
		
		<view class="btnlist" v-if="payment_approval.is_check == 1">
			<view class="btn refuse" @click="toExamine(2)">审核拒绝</view>
			<view class="btn pass" @click="toExamine(1)">审核通过</view>
		</view>
		
		<!-- 标签栏 -->
		<view class="tabwarp">
			<scroll-view scroll-x="true" style="width:750rpx;">
				<view class="tablist_new_list">
					<view class="tabtn" @click="changeTab(0)" :class="{'tabtn_active':active == 0}">详细信息</view>
					<view class="tabtn" @click="changeTab(1)" :class="{'tabtn_active':active == 1}">产品信息</view>
				</view>
			</scroll-view>
			
			<!-- 跟进记录 -->
			<scroll-view scroll-y="true" class="scrollbox" v-if="active == 0">
				<base-info v-if="info.id" :info="info" :payment_approval="payment_approval"></base-info>
			</scroll-view>
			<!-- 基本信息 -->
			<scroll-view scroll-y="true" class="scrollbox" v-if="active == 1">
				<product-detail v-if="info.id" :info="info" ></product-detail>
			</scroll-view>
		</view>
		
		<view style="height:100rpx;"></view>
		<!-- 底部导航栏 -->
		<view class="bottom_nav" @click="moreClick">
			<image style="width: 48rpx;height: 48rpx;margin-right:24rpx;" :src="BASE_IMG_URL+'/morebtn.png'"  mode="scaleToFill"></image>
			<view style="font-size: 34rpx;">更多操作</view>
		</view>
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="popuptitle">更多操作</view>
			<view class="ope_warp">
				<view class="ope_li" @click="toRecall" v-if="info.check_status == 0 || info.check_status == 1">
					<image :src="BASE_IMG_URL+'/index/zhuangpai.png'" class="opeimg" ></image>
					<view class="litext">撤回审核</view>
				</view>
				<view class="ope_li" @click="toEdit" v-if="info.check_status == 3 || info.check_status == 4">
					<image :src="BASE_IMG_URL+'/index/sheji_edit.png'" class="opeimg" ></image>
					<view class="litext">编辑</view>
				</view>
				<view class="ope_li" v-if="info.check_status == 2" @click="toVoid">
					<image :src="BASE_IMG_URL+'/index/sheji_edit.png'" class="opeimg" ></image>
					<view class="litext">作废</view>
				</view>
				<view class="ope_li" @click="copy">
					<image :src="BASE_IMG_URL+'/index/sheji_edit.png'" class="opeimg" ></image>
					<view class="litext">打印</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { BASE_IMG_URL } from '@/api/http.js'
	import { netInvoiceDetail, netApprovalDetail, netInvoicePdf, netRecallInvoice, netVoidInvoice } from '@/api/api.js'
	import baseInfo from './baseInfo.vue'
	import productDetail from './productDetail.vue'
	
	export default{
		components:{
			baseInfo,
			productDetail
		},
		data() {
			return{
				BASE_IMG_URL:BASE_IMG_URL,
				active:0,
				id:'',
				info:{},
				payment_approval:{},
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getDetail()
			this.getApprovalList()
		},
		methods:{
			changeTab(type){
				this.active = type
			},
			getDetail() {
				netInvoiceDetail({id:this.id}).then(res=>{
					this.info = res.data
				})
			},
			getApprovalList() {
				let params = {
					type: 'delivery',
					relation_id: this.id
				}
				netApprovalDetail(params).then(res=>{
					this.payment_approval = res.data
				})
			},
			moreClick() {
				this.$refs.popup.open()
			},
			//编辑
			toEdit() {
				uni.navigateTo({
					url:'/pagesB/devicerGoods/editAddinvoice?id='+this.id,
					success:()=>{
						this.$refs.popup.close()
					}
				})
			},
			//审核
			toExamine(status) {
				uni.navigateTo({
					url:'/pages/template/examine?status='+status+'&id='+this.id+'&type=delivery'
				})
			},
			//撤回审核
			toRecall() {
				uni.showModal({
					title:'提示',
					content:'请确认是否撤回审核?',
					complete:(res=>{
						if(res.confirm){
							netRecallInvoice({id:this.id}).then(data=>{
								uni.showToast({
									title:data.res,
									icon:'none'
								})
								this.$refs.popup.close()
								setTimeout(()=>{
									this.getDetail()
									this.getApprovalList()
								},2000)
							})
						}
					})
				})
			},
			//打印
			copy() {
				netInvoicePdf({ids:this.id}).then(res=>{
					res = res.data
					let obj = {
						name:'pdf',
						file_path:res.pdf,
					}
					this.openCommonFile(obj)
				})
			},
			//作废
			toVoid() {
				uni.navigateTo({
					url:'/pagesB/devicerGoods/void?id='+this.id+'&type=2'
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.tabwarp{
		border-top:1rpx solid #f5f5f5;
		border-bottom:1rpx solid #f5f5f5;
	}
	.scrollbox{
		width:100%;
		height:calc(100vh - 100rpx);
		background:#f5f5f5;
	}
	//tab栏
	.tablist_new_list{
		width:750rpx;
		padding:24rpx 10rpx;
		display: flex;
		justify-content: space-around;	
		align-items: center;
		border-bottom:1rpx solid #f5f5f5;
		background:#fff;
		.tabtn{
			flex-shrink: 0;
			width:170rpx;
			text-align: center;
			font-size:26rpx;
			color:#999;
			padding-bottom:20rpx;
			position: relative;
			&::after{
				content:'';
				position: absolute;
				left:50%;
				transform: translateX(-50%);
				bottom:0;
				width:80rpx;
				height:10rpx;
				background:#fff;
				border-radius: 10rpx;
			}
		}
		.tabtn_active{
			width:170rpx;
			text-align: center;
			font-size:26rpx;
			color:#333;
			padding-bottom:20rpx;
			position: relative;
			&::after{
				content:'';
				position: absolute;
				left:50%;
				transform: translateX(-50%);
				bottom:0;
				width:80rpx;
				height:10rpx;
				background:$uni-btn-bg-color;
				border-radius: 10rpx;
				opacity: 0.5;
			}
		}
	}
	.ope_warp{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding:30rpx 0;
		.warpbox{
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
		.ope_li{
			width:33.33%;
			margin-bottom:24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.opeimg{
				width:38rpx;
				height:38rpx;
				margin-bottom:10rpx;
			}
			.litext{
				font-size:26rpx;
				color:#999999;
				text-align: center;
			}
		}
	}
	.contractinfo {
		background: $uni-color-primary;
		padding: 20rpx 42rpx;
		position: relative;
	
		.constatus {
			position: absolute;
			right: 24rpx;
			top: 24rpx;
			background: #fff;
			padding: 5rpx 12rpx;
			border-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			color: black;
			.con_status{
				color:$uni-color-primary;
			}
		}
		.nameli {
			margin-bottom: 24rpx;
			font-size: 32rpx;
			color: #fff;
			font-size: 36rpx;
			font-weight: 600;
		}
		.content {
			font-size: 30rpx;
			color: #fff;
			margin: 15rpx 0;
			span{
				color:$uni-color-primary;
			}
		}
	}
	.group_tab {
		margin: 20rpx 0;
	}
	.bottom_nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 0;
		background-color: #fff;
		text-align: center;
		color: #999;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9;
	}
	.btnlist {
		padding: 20rpx 24rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #DDDDDD;
		background: #fff;
	
		.btn {
			width: 300rpx;
			height: 60rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
		}
	
		.pass {
			background: $uni-color-primary;
		}
	
		.refuse {
			background: #F43F3B;
		}
	}
</style>